<template>
    
    
    <el-card class="!border-none " shadow="never">
        <el-form class="-mb-3.5" :model="formData" inline>
            <el-form-item label="管理员账号">
                <!-- input clearable 是否显示清楚按钮-->
                <el-input
                    class="w-64"
                    v-model="formData.username"
                    clearable
                >
                
                </el-input>
            </el-form-item>
            
            <el-form-item label="管理员名称">
                <el-input
                    class="w-64"
                    v-model="formData.nickname"
                    clearable
                
                >
                </el-input>
            </el-form-item>
            
            
            <el-form-item label="管理员角色">
                <el-select class="w-64">
                    <el-option label="全部" value=""/>
                
                
                </el-select>
            
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" @click="resetOnePage">查询</el-button>
                <el-button @click="resetParams">重置</el-button>
            </el-form-item>
        </el-form>
    
    
    </el-card>
    
    <el-card class="!border-none  mt-4" shadow="never">
        <el-button type="primary" @click="handleAdd">
            <template #icon>
                <icon name="el-icon-Plus"/>
            </template>
            新增
        </el-button>
        
        
        <div class="mt-4">
            <el-table :data=pagerData.lists>
                <el-table-column label="ID" prop="id"/>
                <el-table-column label="头像">
                    <template #default="{ row }">
                        <el-avatar :size="50" :src="row.avatar"></el-avatar>
                    </template>
                </el-table-column>
                
                <el-table-column label="账号" prop="username"/>
                <el-table-column label="名称" prop="nickname"/>
                <el-table-column label="部门" prop="dept" :show-overflow-tooltip="true"	/>
                <el-table-column label="岗位" prop="post" :show-overflow-tooltip="true"/>
                <el-table-column label="角色" prop="role" :show-overflow-tooltip="true"/>
                <el-table-column label="状态">
                    <template #default="{ row }">
                        <el-switch
                            v-if="row.id !== 1"
                            :model-value="row.isDisable"
                            :active-value="0"
                            :inactive-value="1"
                        >
                        
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button type="primary" link
                                   @click="handleEdit(row)">
                            编辑
                        </el-button>
                        <el-button type="danger" link
                                   v-if="row.id !== 1"
                                   @click="handleDelete(row.id)"
                        >
                            删除
                        </el-button>
                    
                    </template>
                </el-table-column>
            </el-table>
        </div>
        
        <div class="flex  mt-5 justify-end">
            <pagination v-model="pagerData" @change="getPageLists"/>
        </div>
    </el-card>
    
    
    <edit-popup v-if="showEdit" ref="editRef" @success="getPageLists" @close='showEdit =false'/>


</template>

<script setup lang="ts">
import EditPopup from './edit.vue'
import Pagination from "@/components/pagination/index.vue"
import Icon from "@/components/icon/index.vue";
import {reactive, Ref} from "vue";
import {usePagerManager} from "@/manager/base/PagerManager";
import feedback from "@/utils/feedback";
import {adminDelete, adminLists} from "@/api/system/SystemAuthAdminController";


// 注入editRef 方法
const editRef = shallowRef(EditPopup)


// 定义新增开关
const showEdit: Ref<boolean> = ref(false)

// 定义表单数据
const formData = reactive({
    username: '',
    nickname: '',
    role: ''
})


// 获取到分页数据
const {pagerData, getPageLists, resetParams, resetOnePage} = usePagerManager({
    fetchFun: adminLists,
    params: formData
})


/**
 * 调用新增
 */
async function handleAdd() {
    // 显示页面
    showEdit.value = true
    // 等待数据ok再刷新
    await nextTick()
    // 打开通知新增
    editRef.value?.open('add')
}


/**
 *
 * 编辑
 * @param data
 */
async function handleEdit(data: any) {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.setFormData(data)
}

/**
 * 删除数据
 *
 * @param id
 */
const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await adminDelete({ id })
    feedback.msgSuccess('删除成功')
    getPageLists()
}



/**
 *  onMounted 加载集合
 */
onMounted(() => {
    getPageLists()
    
})


</script>

